<template>
  <div class="container fixed team backgroundColor">
    <Header
      content="团队"
      :showBack="false"
      :background="{background:'#292a3a'}"></Header>
    <scroller
      :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
      :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
      lock-x
      height="-115"
      ref="team"
      @on-pullup-loading="onScrollBottom()"
      :use-pullup="true"
      :use-pulldown="true"
      @on-pulldown-loading="onScrollTop()"
    >
      <div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in arealist">
              <div class="flex">
                <div>
                  <span style="color:#BBBBC0" class="font17">{{item.title}}本轮级别</span>
                  <span style="color:#FFFFFF" class="font20">Lv.{{item.t_level}}</span>
                </div>
                <div style="position: relative;">
                  &nbsp;
                  <img src="../assets/img/pend.png" alt=""
                       style="position: absolute;top:0;right: 0;width: 17px;z-index: 0;">
                  <div class="swipterIcon">
                    {{item.t_level}}
                  </div>
                </div>
              </div>
              <div class="font14" style="color:#ffffff;margin-top: 30px;margin-bottom: 15px;">
                ·{{item.t_level_text}}
              </div>
              <div class="login" style="margin-bottom: 20px;">
                <x-button
                  type="primary"
                  @click.native="enlarger"
                >
                  扩大团队人数
                </x-button>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div class="flex" style="color:#D0D0D3;padding:25px 18px;">
          <span class="font18">分级收益</span>
          <!--span class="font13 flex" @click="goTo('/gainRecord')">
              <span>收益记录</span>
              <img src="../assets/img/page.png" alt="" style="margin-left: 7px;">
            </span>-->
        </div>
        <ul>
          <li style="position: relative" class="font14">
            <div class="teamTableTh">
              <div class="teamTableThItemWidth">团队</div>
              <div class="teamTableThItemWidth">人数</div>
              <div class="teamTableThItem teamTableThItemBg">
                <div style="float: left;width:calc(50% - 15px);padding-left: 15px;box-sizing: border-box;">本轮收益</div>
                <div style="float: left;width:calc(50% - 15px);padding-left: 15px;">本期收益</div>
                <div style="width: 18px;"></div>
              </div>
            </div>
          </li>
          <li style="position: relative" class="font13" v-for="item in tableList">
            <div style="padding:0 0px 0 18px;height: 40px;line-height:40px;">
              <div style="border-bottom: 1px solid #3A3A48" class="teamTableThItemWidth">{{item.level | level}}级</div>
              <div style="border-bottom: 1px solid #3A3A48" class="teamTableThItemWidth">{{item.num_user}}</div>
              <div class="teamTableThItem">
                <div class="teamTableThItemItem" style="color:#FFBB23;box-sizing: border-box;">{{item.num_today}}</div>
                <div class="teamTableThItemItem">{{item.num_total}}</div>
                <div style="width: 18px;"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </scroller>
    <div v-transfer-dom>
      <x-dialog v-model="showDialog" class="teamDialog" hide-on-blur>
        <div style="margin: 30px 15px;">
          <div class="center" style="font-weight: bold;">分享二维码</div>
          <!--<Qrcode :value="inviteUrl" type="img" ></Qrcode>-->
          <div style="width:170px;height:170px;background-color:#CCC;margin: 0 auto;" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">
            <img :src="inviteUrl" alt="" style="width: 100%;height: 100%;display: block;">
          </div>
          <div class="font14">
            截图保存
          </div>
          <div class="flexBetween">
            <div style="text-align: left;" class="font14 flexBetween">
              <div style="margin-right: 10px;">
                我的邀请码
              </div>
              <div class="font14" style="text-align: left;color:#333333;">
                {{invateInput}}
              </div>
            </div>
            <Copy
              :invateInput="invateInput"
              butContent="复制"
              :mini="true"
              @copySuccess="copySuccess"
              :classStyle="false"
              className="inviteCode"
              id="inviteCode"
              target="#inviteCode">
            </Copy>
          </div>
          <div style="text-align: left;">
            <div class="font14">
              我的邀请链接
            </div>
            <div>
              <div style="word-break: break-all;color:#333333;" class="font14">
                {{inviteUrlCode}}
              </div>
              <div style="text-align: right;">
                <Copy
                  :invateInput="inviteUrlCode"
                  butContent="复制"
                  :mini="true"
                  @copySuccess="copySuccess"
                  :classStyle="false"
                  className="inviteUrlCode"
                  id="inviteUrlCode"
                  :styleProp="{padding:'0 19px'}"
                  target="#inviteUrlCode"
                ></Copy>
              </div>
            </div>
          </div>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>
  import Header from './common/header.vue'
  import {XDialog, Scroller, SwiperItem,TransferDomDirective as TransferDom,Qrcode } from 'vux'
  import Copy from './common/copy.vue'
  import axios from 'axios'
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  export default{
    data(){
      return {
        showDialog: false,
        showToastCom: false,
        invateInput: '',
        onFetching1: false,
        inviteUrl: '',
        swiperItemIndex: 1,
        arealist: [],
        configData:'',
        tableList:[],
        timeOutEvent:null,
        mySwiper:'',
        activeIndex:'',
        inviteUrlCode:'',
      }
    },
    directives: {
      TransferDom
    },
    methods: {
      gtouchstart(){
        this.timeOutEvent = setTimeout(()=>{
//          this.toastFn('gtouchstart');
          this.createDownload()
        },500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
        return false;
      },
      gtouchend(item){
        clearTimeout(this.timeOutEvent);
//        this.toastFn('gtouchend');
        return false;
      },
      //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
      gtouchmove(){
        clearTimeout(this.timeOutEvent);//清除定时器
      },
      createDownload(){//真正长按后应该执行的内容
        var that = this;
        if(window.plus){
          this.toastFn('plus');
          var dtask = window.plus.downloader.createDownload(that.inviteUrl, {
            method: 'GET',
            filename: '_downloads/image/'
          }, function(d, status){
            // 下载完成
            if(status == 200){
              window.plus.gallery.save(d.filename, function () {
                that.toastFn('保存成功','','success');
              });
            } else {
              that.toastFn('保存失败');
            }
          });
          dtask.start();
        }
      },
      copySuccess(){
        this.showToastCom = false;
      },
      enlarger(){
        this.showDialog = true;
      },
      goTo(path){
        this.$router.push(path)
      },
      openDialog(){
        this.showToastCom = true;
      },
      area(){
        var that = this;
        this.loading(true);
        this.service('area', {}).then(res=> {
          this.loading(false);
          this.onFetching1 = false;
          this.arealist = res.data.arealist;
//          if(this.arealist[4]){
//            this.arealist[4].t_leves[1].num_today = this.count;
//          }
          this.$nextTick(()=> {
            this.$refs.team.donePulldown();
            this.$refs.team.disablePullup();
            if(!this.mySwiper){
              this.mySwiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                loop:false,
                pagination: {
                  el: '.swiper-pagination',
                },
                on:{
                  slideChange: function(){
                    that.tableList = that.arealist[this.activeIndex].t_leves;
                    that.activeIndex = this.activeIndex
                  },
                  init(){
                    that.tableList = that.arealist[this.activeIndex].t_leves;
                    that.activeIndex = this.activeIndex
                  }
                },
              })
            }else{
              that.tableList = that.arealist[that.activeIndex].t_leves;
//              this.mySwiper.update()
            }
          })
        })
      },
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.area();
        }
      },
      getConfig(data){
        this.configData = window.g;
        this.inviteUrl = this.configData.ApiUrl + '/' + data.qrcode;
        this.inviteUrlCode = this.configData.inviteUrl + data.myinvitecode;
      },
    },
    created(){
      this.onScrollTop();
      let userInfo = JSON.parse(localStorage.getItem('userinfo'));
      this.invateInput = userInfo.myinvitecode;
      this.getConfig(userInfo);
    },
    components: {
      Header,
      XDialog,
      Copy,
      Scroller,
      SwiperItem,
      Qrcode
    }
  }
</script>
<style>
  .team .swiper-container{
    width:calc(100% - 36px);
    box-sizing: border-box;
  }
  .team .swiper-container .swiper-slide {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    background: -webkit-linear-gradient(right top, rgba(69, 69, 85, 0.7), rgba(69, 69, 85, 1));
    background: -o-linear-gradient(bottom right, rgba(69, 69, 85, 0.7), rgba(69, 69, 85, 1));
    background: -moz-linear-gradient(bottom right, rgba(69, 69, 85, 0.7), rgba(69, 69, 85, 1));
    background: linear-gradient(to bottom left, rgba(69, 69, 85, 0.7), rgba(69, 69, 85, 1));
  }
  .teamTableTh {
    padding: 0 0px 0 18px;
    height: 30px;
    line-height: 30px;
  }
  .teamTableThItem {
    width: 58%;
    box-sizing: border-box;
    float: left;
  }

  .teamTableThItemItem {
    float: left;
    width: calc(50% - 15px);
    border-bottom: 1px solid #3A3A48;
    padding-left: 18px;
  }

  .teamTableThItemBg {
    background: -webkit-linear-gradient(right top, rgba(69, 69, 85, 0.7), rgba(69, 69, 85, 1));
    background: -o-linear-gradient(bottom right, rgba(69, 69, 85, 0.7), rgba(69, 69, 85, 1));
    background: -moz-linear-gradient(bottom right, rgba(69, 69, 85, 0.7), rgba(69, 69, 85, 1));
    background: linear-gradient(to bottom left, rgba(69, 69, 85, 0.7), rgba(69, 69, 85, 1));
  }

  .teamTableThItemWidth {
    float: left;
    width: 21%;
  }

  .swipterIcon {
    background: url('../assets/img/gold.png');
    background-size: 100%;
    width: 17px;
    height: 17px;
    right: 0;
    top: 11px;
    position: absolute;
    font-size: 12px;
    text-align: center;
    line-height: 17px;
  }

  .teamDialog {
    padding: 30px 15px;
  }
  .teamDialog .inviteUrl,.teamDialog .inviteCode{
    width:64px;
    height: 32px;
    padding:0!important;
    border:none;
  }
</style>
